---
title: 安装一个 Vite 或 Rollup 插件
description: 了解如何通过向项目添加 Rollup 插件来导入 YAML 数据。
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro 基于 Vite 构建，并支持 Vite 和 Rollup 插件。该操作指南使用 Rollup 插件来添加在 Astro 中导入 YAML（`.yml`）文件的能力。

## 操作步骤

<Steps>
1. 安装 `@rollup/plugin-yaml`：

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. 在 `astro.config.mjs` 中导入插件并将其添加到 Vite 插件数组中：

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```

3. 最后，你可以使用 `import` 语句导入 YAML 数据：

    ```js
    import yml from './data.yml';
    ```

    :::note
    当你在 Astro 项目中导入 YAML 数据时，你的编辑器将不会为导入的数据提供类型。要添加类型，请在项目的 `src` 目录中创建或查找现有的 `*.d.ts` 文件，并添加以下内容：
    ```ts title="src/files.d.ts"
    // 指定要导入的文件扩展名
    declare module "*.yml" {
      const value: any; // 添加期望的类型定义
      export default value;
    }
    ```
    这将允许你的编辑器为 YAML 数据提供类型提示。
    :::
</Steps>
